<template>
  <div id="returnBack">
    <el-card id="notice">
      <el-row type="flex" justify="space-between">
        <el-col>
          <span id="note">[公告]</span>
        </el-col>
        <el-col>
          <a id="more" href="">更多+</a>
        </el-col>
      </el-row>
    </el-card>
    <el-card id="moment">
      <span style="color: #7f7f7f">退书/退款申请</span>
    </el-card>
    <el-card id="btable">
      <el-row type="flex" justify="start" style="margin-bottom: 1rem">
        <el-col>
            <el-button id="returnOder" :disabled="multiple">
              未开始退订
            </el-button>
        </el-col>
      </el-row>
      <el-table
          :data="tableData"
          border
          v-loading="loading"
          :header-cell-style="isCenter"
          style="width: 100%">
        <el-table-column
            prop="semester"
            label="学期">
        </el-table-column>
        <el-table-column
            prop="returnOrder"
            label="退单号">
        </el-table-column>
        <el-table-column
            prop="unsubscribe"
            label="退订书籍">
        </el-table-column>
        <el-table-column
            prop="copies"
            label="册数">
        </el-table-column>
        <el-table-column
            prop="totalAmount"
            label="总金额（￥）">
        </el-table-column>
        <el-table-column
            prop="status"
            label="状态">
        </el-table-column>
        <el-table-column
            prop="voucher"
            label="凭证">
        </el-table-column>
        <el-table-column
            prop="time"
            label="时间">
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
name: "returnBack",
  data() {
    return {
      queryParams: {
        semester: null,
        returnOrder: null,
        unsubscribe: null,
        copies: null,
        totalAmount: null,
        status: null,
        voucher: null,
        time: null,
        pageNum: 1,
        pageSize: 10,
      },
      tableData: [],
      total: null,
      loading: false,
      multiple: true,
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      // this.loading = true;
      listOfReturnBack(this.queryParams).then(response => {
        this.tableData = response.rows;
        this.total = response.total;
        this.loading = false;
      })
    },
    //表格内容居中显示
    isCenter({ row, column, rowIndex, columnIndex }) {
      return 'text-align:center'
    },
  }
}
</script>

<style scoped>
#more {
  float: right;
}

#note {
  float: left;
  color: red;
}

#notice {
  margin: 0 20px;
  height: 50px;
}

#moment {
  margin: 10px 20px;
  display: flex;
}

#btable {
  margin: 10px 20px;
}

#returnOder {
  float: left;
}

#returnBack {
  margin: 0 300px;
}
</style>
